<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>Date 日期对象</h4>
				<pre>
	let dateTime = Date.now()					//获取当前时间戳				
	var myDate = new Date();					//获取当前时间
	myDate.getFullYear();    					//获取完整的年份(4位,1970-????)
	myDate.getMonth();       					//获取当前月份(0-11,0代表1月)
	myDate.getDate();        					//获取当前日(1-31)
	myDate.getDay();         					//获取当前星期X(0-6,0代表星期天)
	myDate.getTime();        					//获取当前时间(从1970.1.1开始的毫秒数)
	myDate.getHours();       					//获取当前小时数(0-23)
	myDate.getMinutes();    					//获取当前分钟数(0-59)
	myDate.getSeconds();     					//获取当前秒数(0-59)
	myDate.getMilliseconds();    					//获取当前毫秒数(0-999)
	myDate.toLocaleDateString();     				//获取当前日期
	var mytime=myDate.toLocaleTimeString();     			//获取当前时间
	myDate.toLocaleString();        				//获取日期与时间				
				</pre>
			</div>
			<div>
				<h4>时间的格式化</h4>
				<pre>
	// 对Date的扩展，将 Date 转化为指定格式的String
	// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
	// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
	 
	Date.prototype.Format = function (fmt) { // author: meizz
	  var o = {
	    "M+": this.getMonth() + 1, // 月份
	    "d+": this.getDate(), // 日
	    "h+": this.getHours(), // 小时
	    "m+": this.getMinutes(), // 分
	    "s+": this.getSeconds(), // 秒
	    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
	    "S": this.getMilliseconds() // 毫秒
	  };
	  if (/(y+)/.test(fmt))
	    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	  for (var k in o)
	    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	      return fmt;
	}		
	
	var time1 = new Date().Format("yyyy-MM-dd");
	var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");	
	
	console.log(time1,time2)===> 2020-12-14   2020-12-14 10:36:04

				</pre>
			</div>
			<div>
				<h4>计算距离时间</h4>
				<pre>
	&lt;input type="text" name="" id="t" value="" /&gt;				
					
	function calculateTime(){
		var now = Date.now();
		var holiday = new Date("2033-10-01 00:00:00").getTime();
		var time = Math.floor((holiday-now)/1000);
		var day = Math.floor(time/(60*60*24));
		var hour = Math.floor(time%(60*60*24)/3600);
		var min = Math.floor((time/60)%60);
		var sec = Math.floor(time%60);
		t.value=day+"天"+hour+"时"+min+"分"+sec+"秒";
	}	
	setInterval(calculateTime,1000);//设置每秒更新			
				</pre>
	<input type="text" name="" id="t" value="" />		
				<h4>另一种时间倒计时</h4>
				<pre>
	var maxtime = 1 * 60;
	function CountDown() {
		if (maxtime >= 0) {
		minutes = Math.floor(maxtime / 60);
		seconds = Math.floor(maxtime % 60);
		msg = "距离结束还有" + minutes + ":" + seconds ;
		document.querySelector(".timer").innerHTML = msg;
		--maxtime;
		} else{
			clearInterval(timer);
			alert("时间到，结束!");
		}
	}
	***
	timer = setInterval("CountDown()", 1000); 
		<div class="timer">距离结束还有</div>
		<button type="button" id="countDown">点击开始倒计时</button>
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script type="text/javascript">
		function calculateTime(){
			var now = Date.now();
			var holiday = new Date("2033-10-01 00:00:00").getTime();
			var time = Math.floor((holiday-now)/1000);
			var day = Math.floor(time/(60*60*24));
			var hour = Math.floor(time%(60*60*24)/3600);
			var min = Math.floor((time/60)%60);
			var sec = Math.floor(time%60);
			t.value=day+"天"+hour+"时"+min+"分"+sec+"秒";
		}
		setInterval(calculateTime,1000);//设置每秒更新
		var maxtime = 1 * 60;
		function CountDown() {
			if (maxtime >= 0) {
			minutes = Math.floor(maxtime / 60);
			seconds = Math.floor(maxtime % 60);
			msg = "距离结束还有" + minutes + ":" + seconds ;
			document.querySelector(".timer").innerHTML = msg;
			--maxtime;
			} else{
				clearInterval(timer);
				alert("时间到，结束!");
			}
		}
		let countDown=document.querySelector('#countDown')
		countDown.addEventListener('click',()=>{
			timer = setInterval("CountDown()", 1000); 
		})
	</script>
</body>

</html>